<!doctype html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=9" >
	<title>Visual Mail Stat Chart</title>
	<link href="chart.css" rel="stylesheet" type="text/css">
	<script language="javascript" type="text/javascript" src="min.js"></script>
	<script language="javascript" type="text/javascript" src="Chart.js"></script>
	<script language="javascript" type="text/javascript" src="rawdata.js"></script>

</head>
<body onload="OnClickGeneral();">

<div class="tabcontainer"><a href="#" class="current" id="GenBtn" onclick="OnClickGeneral();">General</a><a href="#"  id="SenderBtn" onclick="OnClickTopSender();">Top Sender</a><a href="#"  id="ReceiverBtn" onclick="OnClickTopReceiver();">Top Receiver</a></div>


	<div class="chart-container">
		<div class="TagContainer" id="TagDiv"><div class="SenderTag"></div><span>Sent</span><div class="ReciverTag"></div><span>Received</span></div>
		<canvas id="canvas" height="300" width="700"></canvas>
		
	</div>
	<script>
	
	function OnClickGeneral(){
		if (GeneralLabel.length < 1)	{
			alert("No Top General data found");
			return;
		}
		
		 document.getElementById('TagDiv').style.display = "";
		 document.getElementById('GenBtn').className = "current"; 
		 document.getElementById('SenderBtn').className = "";
		 document.getElementById('ReceiverBtn').className = "";
		 ShowGeneralChart();
	}
	
	function OnClickTopSender(){
		if (SenderLabel.length < 1)	{
			alert("No Top Sender data found");
			return;
		}
		
		document.getElementById('TagDiv').style.display = "none";
		document.getElementById('GenBtn').className = "";
		document.getElementById('SenderBtn').className = "current";
		document.getElementById('ReceiverBtn').className = "";
		ShowTopSenderChart();		
	}
	
	function OnClickTopReceiver(){
		if (ReceiverLabel.length < 1)	{
			alert("No Top Receiver data found");
			return;
		}
		
		document.getElementById('TagDiv').style.display = "none";
		document.getElementById('GenBtn').className = "";
		document.getElementById('SenderBtn').className = "";
		document.getElementById('ReceiverBtn').className = "current";
		ShowTopReceiver();		
	}
	
	function ShowGeneralChart(){
	
		var barChartData = {
			labels : GeneralLabel,
			datasets : [
				{
					fillColor : "#F7464A",
					strokeColor : "rgba(220,220,220,1)",
					data : DataSent
				},
				{
					fillColor : "#4D5360",
					strokeColor : "rgba(151,187,205,1)",
					data : DataReceived
				}
			]
		}

		new Chart(document.getElementById("canvas").getContext("2d")).Bar(barChartData);
	}
	
	function ShowTopSenderChart(){
		var barChartData = {
			labels : SenderLabel,
			datasets : [
				{
					fillColor : "#4D5360",
					strokeColor : "rgba(220,220,220,1)",
					data : DataSender
				}
			]
		}

		new Chart(document.getElementById("canvas").getContext("2d")).Bar(barChartData);
	}
	
	function ShowTopReceiver(){
	
		var barChartData = {
			labels : ReceiverLabel,
			datasets : [
				{
					fillColor : "#7D4F6D",
					strokeColor : "rgba(220,220,220,1)",
					data : DataReceiver
				}
			]
		}

		new Chart(document.getElementById("canvas").getContext("2d")).Bar(barChartData);
	}

	
	</script>
</body>
</html>
